<script setup>
import { ref, watchEffect, h, render, nextTick, onUpdated } from 'vue'
import { userApi } from '@/api'
import { colleges } from '@/utils/defines.js'
const loading = ref(false)
const data = ref(null)
const inputRef = ref(null)
watchEffect(async () => {
    await userApi.getUserInfos().then((res) => {
        data.value = res.data
    })
    loading.value = false
})

const addInformation = () => {

}
onUpdated(() => {

})
const eidtInformation = (row) => {
    row.disable = null
}
const deleteInformation = () => { }
const valid = ref(true)
</script>

<template>

    <div v-loading="loading" style="width:90vw;margin:50px;height:90vh">
        <el-table :data=data table-layout="auto" :stripe="true" @cell-dblclick="dbClicks">
            <el-table-column property="userNumber" label="工号" align="center">
                <template #default="{ row, column }">

                    {{ row[column.property] }}

                </template>
            </el-table-column>
            <el-table-column property="userName" label="姓名" align="center">
                <template #default="{ row, column }">

                    {{ row[column.property] }}

                </template>
            </el-table-column>

            <el-table-column property="college" label="学院" align="center">
                <template #default="{ row, column }">

                    {{ colleges[row[column.property]] }}

                </template>
            </el-table-column>
            <el-table-column property="phone" label="电话" align="center">
                <template #default="{ row, column }">
                    {{ row[column.property] }}

                </template>
            </el-table-column>
            <el-table-column property="email" label="邮箱" align="center">
                <template #default="{ row, column }">
                    {{ row[column.property] }}

                </template>
            </el-table-column>
            <el-table-column property="userRemark" label="备注" align="center">
                <template #default="{ row, column }">

                    {{ row[column.property] }}

                </template>
            </el-table-column>


            <el-table-column align="center">
                <template #header>
                    <el-button @click="addInformation">添加</el-button>
                </template>
                <template #default="scope">
                    <el-button size="small"@click="eidtInformation(scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="deleteInformation(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <UserAMView/>
</template>

<style scope>
.input {
    width: auto
}
</style>